{% extends 'base.html' %}
{% load static %}

{% block title %}系统通知 - 固定资产管理系统{% endblock %}

{% block extra_css %}
<style>
    .notification-card {
        background: white;
        border-radius: 10px;
        margin-bottom: 15px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: all 0.3s;
    }
    
    .notification-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }
    
    .notification-card.unread {
        border-left: 4px solid #007bff;
    }
    
    .notification-header {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
    }
    
    .notification-body {
        padding: 15px 20px;
    }
    
    .notification-type-info { color: #17a2b8; }
    .notification-type-warning { color: #ffc107; }
    .notification-type-error { color: #dc3545; }
    .notification-type-success { color: #28a745; }
    
    .priority-urgent { 
        background: #dc3545; 
        color: white;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.8em;
    }
    .priority-high { 
        background: #fd7e14; 
        color: white;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.8em;
    }
    .priority-medium { 
        background: #ffc107; 
        color: #000;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.8em;
    }
    .priority-low { 
        background: #28a745; 
        color: white;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.8em;
    }
    
    .stats-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .filter-card {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-bell"></i> 系统通知</h2>
                <div>
                    <button class="btn btn-outline-primary" id="markAllReadBtn">
                        <i class="fas fa-check-double"></i> 全部标记已读
                    </button>
                    <button class="btn btn-outline-secondary" onclick="location.reload()">
                        <i class="fas fa-sync-alt"></i> 刷新
                    </button>
                </div>
            </div>
            
            <!-- 统计信息 -->
            <div class="row mb-4">
                <div class="col-md-4">
                    <div class="stats-card">
                        <h5><i class="fas fa-list"></i> 总通知数</h5>
                        <h3>{{ stats.total }}</h3>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="stats-card">
                        <h5><i class="fas fa-envelope"></i> 未读通知</h5>
                        <h3>{{ stats.unread }}</h3>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="stats-card">
                        <h5><i class="fas fa-exclamation-triangle"></i> 紧急通知</h5>
                        <h3>{{ stats.urgent }}</h3>
                    </div>
                </div>
            </div>
            
            <!-- 筛选条件 -->
            <div class="filter-card">
                <form method="get" class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">阅读状态</label>
                        <select name="is_read" class="form-select">
                            <option value="">全部</option>
                            <option value="0" {% if is_read == '0' %}selected{% endif %}>未读</option>
                            <option value="1" {% if is_read == '1' %}selected{% endif %}>已读</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">通知类型</label>
                        <select name="type" class="form-select">
                            <option value="">全部类型</option>
                            {% for value, label in type_choices %}
                                <option value="{{ value }}" {% if notification_type == value %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">搜索</label>
                        <input type="text" name="search" class="form-control" placeholder="搜索通知标题或内容..." value="{{ search_query }}">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">&nbsp;</label>
                        <button type="submit" class="btn btn-primary d-block w-100">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>
                </form>
            </div>
            
            <!-- 通知列表 -->
            <div class="notifications-container">
                {% for notification in page_obj %}
                <div class="notification-card {% if not notification.is_read %}unread{% endif %}" data-id="{{ notification.id }}">
                    <div class="notification-header">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="flex-grow-1">
                                <h6 class="mb-1">
                                    <i class="fas fa-{% if notification.notification_type == 'info' %}info-circle notification-type-info{% elif notification.notification_type == 'warning' %}exclamation-triangle notification-type-warning{% elif notification.notification_type == 'error' %}times-circle notification-type-error{% else %}check-circle notification-type-success{% endif %}"></i>
                                    {{ notification.title }}
                                    {% if not notification.is_read %}
                                        <span class="badge bg-primary ms-2">新</span>
                                    {% endif %}
                                </h6>
                                <div class="d-flex align-items-center">
                                    <span class="priority-{{ notification.priority }}">{{ notification.get_priority_display }}</span>
                                    <small class="text-muted ms-3">
                                        <i class="fas fa-clock"></i> {{ notification.created_at|date:"Y-m-d H:i:s" }}
                                    </small>
                                    {% if notification.sender %}
                                        <small class="text-muted ms-3">
                                            <i class="fas fa-user"></i> {{ notification.sender.username }}
                                        </small>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    {% if not notification.is_read %}
                                        <li>
                                            <a class="dropdown-item mark-read-btn" href="#" data-id="{{ notification.id }}">
                                                <i class="fas fa-check"></i> 标记已读
                                            </a>
                                        </li>
                                    {% endif %}
                                    {% if notification.related_url %}
                                        <li>
                                            <a class="dropdown-item" href="{{ notification.related_url }}">
                                                <i class="fas fa-external-link-alt"></i> 查看详情
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="notification-body">
                        <p class="mb-0">{{ notification.message }}</p>
                        
                        {% if notification.is_read and notification.read_at %}
                            <small class="text-muted mt-2 d-block">
                                <i class="fas fa-check-double"></i> 已于 {{ notification.read_at|date:"Y-m-d H:i:s" }} 阅读
                            </small>
                        {% endif %}
                        
                        {% if notification.expires_at %}
                            <small class="text-warning mt-2 d-block">
                                <i class="fas fa-hourglass-half"></i> 
                                {% if notification.is_expired %}
                                    已过期
                                {% else %}
                                    过期时间: {{ notification.expires_at|date:"Y-m-d H:i:s" }}
                                {% endif %}
                            </small>
                        {% endif %}
                    </div>
                </div>
                {% empty %}
                <div class="text-center text-muted py-5">
                    <i class="fas fa-inbox fa-3x mb-3"></i>
                    <p>暂无通知</p>
                </div>
                {% endfor %}
            </div>
            
            <!-- 分页 -->
            {% if page_obj.has_other_pages %}
            <div class="d-flex justify-content-center mt-4">
                <nav>
                    <ul class="pagination">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.previous_page_number }}">上一页</a>
                            </li>
                        {% endif %}
                        
                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                                <li class="page-item active">
                                    <span class="page-link">{{ num }}</span>
                                </li>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                <li class="page-item">
                                    <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ num }}">{{ num }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.next_page_number }}">下一页</a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 标记单个通知为已读
    $('.mark-read-btn').click(function(e) {
        e.preventDefault();
        const notificationId = $(this).data('id');
        const $card = $(`.notification-card[data-id="${notificationId}"]`);
        
        $.ajax({
            url: `{% url 'assets:notification_mark_read' 0 %}`.replace('0', notificationId),
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    $card.removeClass('unread');
                    $card.find('.badge:contains("新")').remove();
                    $(e.target).closest('li').remove();
                    
                    // 更新统计数字
                    updateUnreadCount(-1);
                    
                    showAlert('success', '通知已标记为已读');
                }
            },
            error: function() {
                showAlert('error', '操作失败，请重试');
            }
        });
    });
    
    // 标记所有通知为已读
    $('#markAllReadBtn').click(function() {
        if (!confirm('确定要将所有未读通知标记为已读吗？')) {
            return;
        }
        
        $.ajax({
            url: '{% url "assets:notification_mark_all_read" %}',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}'
            },
            success: function(response) {
                if (response.success) {
                    $('.notification-card.unread').removeClass('unread');
                    $('.badge:contains("新")').remove();
                    $('.mark-read-btn').closest('li').remove();
                    
                    // 更新统计数字
                    updateUnreadCount(-response.count);
                    
                    showAlert('success', `已标记 ${response.count} 条通知为已读`);
                }
            },
            error: function() {
                showAlert('error', '操作失败，请重试');
            }
        });
    });
    
    // 更新未读数量
    function updateUnreadCount(change) {
        const $unreadCount = $('.stats-card h3').eq(1);
        const currentCount = parseInt($unreadCount.text());
        const newCount = Math.max(0, currentCount + change);
        $unreadCount.text(newCount);
    }
    
    // 显示提示信息
    function showAlert(type, message) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const alertHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show position-fixed" style="top: 20px; right: 20px; z-index: 9999;" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        
        $('body').append(alertHtml);
        
        // 3秒后自动消失
        setTimeout(function() {
            $('.alert').alert('close');
        }, 3000);
    }
    
    // 自动刷新未读通知
    setInterval(function() {
        // 只在有未读通知时刷新
        if ($('.notification-card.unread').length > 0) {
            // 这里可以通过AJAX获取新的通知数量
            // 暂时省略具体实现
        }
    }, 60000); // 每分钟检查一次
});
</script>
{% endblock %}